<template>
  <div id="box"></div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import * as echarts from "echarts";

export default {
  props: [],
  components: {},
  data() {
    return {};
  },
  watch:{
      cateList:{
          handler(){
   var myChart = echarts.init(document.getElementById("box"));
   var option = {
      xAxis: {
        type: "category",
        data: this.cateList.map(item=> item.catename)
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: this.cateList.map(item=>item.children.length),
          type: "line",
        },
      ],
    };
    myChart.setOption(option);
    
      },
      deep : true
      }
      
  },
  computed: {
    ...mapGetters({
        cateList:"cate/list"

    }),
  },
  methods: {
    ...mapActions({
        reqcateList:"cate/reqChangeList"
    }),
  },
  mounted() {
      this.reqcateList()
      console.log(this.cateList);
        
  
  },
};
</script>
<style scoped>
#box {
  width: 60%;
  height: 400px;
  border: 1px solid red;
}
</style>